import { useEffect } from "react";
import { Link, useSearchParams } from "react-router-dom";
import styles from "./index.module.scss";

const ArticlePage = () => {
  const [searchParams] = useSearchParams();
  const title = searchParams.get("title") || "文章";
  const grade = searchParams.get("grade") || "";
  const activityTitle = searchParams.get("activityTitle") || "";

  useEffect(() => {
    document.title = `${title} · 儿童发展平台`;
  }, [title]);

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <Link to="/child-development" aria-label="返回" className={styles.back}>
          <svg width="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </Link>
        <div className={styles.title}>{title}</div>
        <div style={{ width: 32 }} />
      </header>

      <div className={styles.content}>
        <div className={styles.breadcrumb}>
          {grade && <span className={styles.breadcrumbItem}>{grade}</span>}
          {activityTitle && (
            <>
              <span className={styles.breadcrumbSeparator}>/</span>
              <span className={styles.breadcrumbItem}>{activityTitle}</span>
            </>
          )}
          <span className={styles.breadcrumbSeparator}>/</span>
          <span className={styles.breadcrumbItem}>{title}</span>
        </div>

        <div className={styles.article}>
          <h1 className={styles.articleTitle}>{title}</h1>
          <div className={styles.articleMeta}>
            <span className={styles.metaItem}>发布时间：2024-01-01</span>
            <span className={styles.metaItem}>阅读量：1234</span>
          </div>
          <div className={styles.articleContent}>
            <p>这里是文章内容区域。您可以根据实际需求替换为真实的文章内容。</p>
            <p>文章内容可以包含文字、图片、列表等多种格式。</p>
            <h2>章节标题</h2>
            <p>这里是章节的具体内容...</p>
            <ul>
              <li>列表项 1</li>
              <li>列表项 2</li>
              <li>列表项 3</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArticlePage;

